<template>
	<view class="coupon">
		<view class="item" v-for="(item, index) in dataObj.list" :key="item.coupon_code">
			<view class="left">
				<view class="price">
					<span class="unit">¥</span>{{item.expression2}}
				</view>
				<view class="selling-price" v-if="item.expression1">满{{item.expression1}}可用</view>
				<view class="selling-price" v-if="!item.expression1">无条件</view>
			</view>
			<view class="right">
				<view class="title">{{item.name}}</view>
				<view class="time">{{item.stime}} - {{item.etime}}</view>
				<view class="use-btn" :class="dataObj.selectIndex === index ? 'selected' : ''" @click="onUseTap(index)">使用</view>
			</view>
		</view>
		<view class="footer" v-if="dataObj.fromPage === 'createOrder'">
			<view class="btn" @click="onSumbitTap">确定</view>
		</view>
	</view>
</template>

<script>
	import { requestErrorTip } from '@/common/tools.js';
	
	export default {
		data() {
			return {
				dataObj: {
					fromPage: '',
					selectIndex: '',
					list: []
				}
			}
		},
		onLoad(event) {
			if (event.fromPage === 'createOrder') {
				this.dataObj['selectIndex'] = uni.getStorageSync('couponObj').index;
				this.dataObj['fromPage'] = event.fromPage
			}
			this.getData(); // 获取数据
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.getData();
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			// 去使用
			onUseTap(index) {
				if (this.dataObj['fromPage'] === 'createOrder') {
					if (this.dataObj['selectIndex'] === index) {
						this.dataObj['selectIndex'] = '';
					} else {
						this.dataObj['selectIndex'] = index;
					}
				} else {
					uni.switchTab({
						url: '../../cart/cart'
					})
				}
			},
			// 确定
			onSumbitTap() {
				const index = this.dataObj['selectIndex'];
				if (index === '') {
					// 清除couponObj
					uni.removeStorageSync('couponObj');
				} else {
					const couponCode = this.dataObj['list'][index]['coupon_code'];
					const name = this.dataObj['list'][index]['expression2'];
					uni.setStorage({
						key: 'couponObj',
						data: {
							index: index,
							couponCode: couponCode,
							name: name
						}
					});
				}
				setTimeout(() => {
					uni.navigateBack();
				}, 200);
			},
			// 获取数据
			getData() {
				this.$Requset({
					url: this.$Api['user']['coupon'],
					data: {},
					success: (res) => {
						const { data, status, msg } = res;
						if (!status) {
							requestErrorTip('toast', msg);
							return;
						}
						// 处理数据
						this.dataObj['list'] = data['list'];
					},
					fail: (err) => {
						console.log(err);
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #f5f5f5;
	}
	.coupon{
		padding: 18rpx 36rpx 100rpx;
		.item{
			display: flex;
			height: 180rpx;
			margin-bottom: 18rpx;
			background-color: #FFFFFF;
			border-radius: 22rpx;
			.left{
				position: relative;
				width: 180rpx;
				text-align: center;
				padding-top: 30rpx;
				border-right: 1rpx dashed #EAEFF1;
				&::before{
					content: '';
					position: absolute;
					top: -10rpx;
					right: -10rpx;
					width: 20rpx;
					height: 20rpx;
					background-color: #F7F7F7;
					border-radius: 50%;
				}
				&::after{
					content: '';
					position: absolute;
					bottom: -10rpx;
					right: -10rpx;
					width: 20rpx;
					height: 20rpx;
					background-color: #F7F7F7;
					border-radius: 50%;
				}
				.price{
					width: 100%;
					height: 72rpx;
					font-size: 40rpx;
					font-weight: bold;
					color: $color-common;
					.unit{
						font-size: 24rpx;
					}
				}
				.selling-price{
					width: 100%;
					line-height: 30rpx;
					font-size: 22rpx;
					color: #7F7F7F;
				}
			}
			.right{
				flex: 1;
				position: relative;
				padding: 54rpx 160rpx 0 28rpx;
				.title{
					line-height: 40rpx;
					font-size: 30rpx;
					font-weight: bold;
					color: #1A1A1A;
					margin-bottom: 4rpx;
				}
				.time{
					line-height: 26rpx;
					font-size: 18rpx;
					color: #7F7F7F;
				}
				.use-btn{
					position: absolute;
					top: 50%;
					margin-top: -26rpx;
					right: 24rpx;
					width: 128rpx;
					height: 52rpx;
					line-height: 52rpx;
					font-size: 22rpx;
					color: #FFFFFF;
					text-align: center;
					border-radius: 26rpx;
					background-color: #ddd;
				}
				.selected{
					background-color: $color-common;
				}
			}
		}
		.footer{
			box-sizing: border-box;
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 100rpx;
			padding: 15rpx 36rpx;
			background-color: #FFFFFF;
			border-top: 1rpx solid #E4EAED;
			.btn{
				width: 100%;
				height: 70rpx;
				line-height: 70rpx;
				font-size: 26rpx;
				color: #FFFFFF;
				text-align: center;
				background-color: $color-common;
				border-radius: 35rpx;
			}
		}
	}
</style>
